<template>
	<div style="position: relative">
		<search-form :query-form="params" :form-span="6" @refresh="refresh">
			<template #firstLine>
				<el-col :span="6" class="search-from-row">
					<el-form-item prop="userName" label="用户名：">
						<el-input v-model="params.userName" placeholder="用户名" />
					</el-form-item>
				</el-col>
				<el-col :span="6" class="search-from-row">
					<el-form-item prop="loginName" label="登录名：">
						<el-input v-model="params.loginName" placeholder="登录名" />
					</el-form-item>
				</el-col>
				<el-col :span="6" class="search-from-row" />
			</template>
		</search-form>
		<div class="global-table-content">
			<div class="table-button-group">
				<el-button-group>
					<el-button type="primary" size="small" @click="addvisible = true">
						<el-icon>
							<el-icon-plus />
						</el-icon>
						添加
					</el-button>
					<el-button type="danger" size="small" @click="addvisible = true">
						<el-icon>
							<el-icon-delete />
						</el-icon>
						删除
					</el-button>
					<el-button type="success" size="small" @click="refresh">
						<el-icon>
							<el-icon-refresh />
						</el-icon>
						刷新
					</el-button>
				</el-button-group>
			</div>
			<base-page
				ref="refUserPage"
				:header-row-class-name="'my-table-heard'"
				:header-cell-class-name="'my-table-heard'"
				:row-class-name="'my-table-row'"
				:divclass="'tree-div-page'"
				:data-function="getData"
				:other-params="params"
			>
				<el-table-column align="center" label="编号" min-width="5%">
					<template #default="scope">
						<span>{{ scope.row.userId }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="用户名" min-width="10%">
					<template #default="scope">
						<span>{{ scope.row.userName }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="登录名" min-width="10%">
					<template #default="scope">
						<span>{{ scope.row.loginName }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="手机号" min-width="10%">
					<template #default="scope">
						<span>{{ scope.row.phone }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="注册日期" min-width="15%">
					<template #default="scope">
						<span>{{ scope.row.registerDate }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="地址" min-width="15%">
					<template #default="scope">
						<span>{{ scope.row.address }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="状态" min-width="5%">
					<template #default="scope">
						<span>{{ formatter(scope.row.state) }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" min-width="20%">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editForm(scope.$index, scope.row)">
							<el-icon>
								<el-icon-edit />
							</el-icon>
							编辑
						</el-button>
						<el-button size="small" type="danger" @click="deleteForm(scope.$index, scope.row)">
							<el-icon>
								<el-icon-delete />
							</el-icon>
							删除
						</el-button>
					</template>
				</el-table-column>
			</base-page>
		</div>
		<user-add :dialog-visible="addvisible" @changeAdd="setAddVisible" />
		<user-edit :dialog-visible="editvisible" :row-data="editRow" @changeEdit="setEditVisible" />
	</div>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue';
import { system } from '@/api';
import BasePage from '@/components/page/BasePage';
import { EnumResult } from '@/assets/model/enums/EnumUtil';
import RequestUtil from '@/assets/model/common/RequestUtil';
import SearchForm from '@/components/page/SearchForm.vue';
import Add from './Add.vue';
import Edit from './Edit.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
const name = 'UserPage';
const refUserPage = ref(null);

let editRow = {};
let params = { userName: '', loginName: '' };
let user = new system.user();
let addvisible = false;
let editvisible = false;
const UserAdd = Add;
const UserEdit = Add;

/**添加页面 */
function setAddVisible(visible: boolean) {
	addvisible = visible;
}
/**编辑页面 */
function setEditVisible(visible: boolean) {
	editvisible = visible;
}
/**获取列表数据 */
function getData(data: any) {
	return user.selectuserpage(data);
}
/**刷新 */
function refresh() {
	let table: any = refUserPage.value;
	table.refresh();
}
/**格式化列表中（是否父节点） */
function formatter(value: string) {
	if (value == '1') {
		return '有效';
	} else {
		return '无效';
	}
}
/**
 * 编辑用户信息
 * @param index 索引
 * @param row 选中行数据
 */
function editForm(index: any, row: any) {
	editRow = row;
	editvisible = true;
}
//删除用户信息
const deleteForm = (index: any, row: any) => {
	let data = {
		id: row.userId
	};
	ElMessageBox.confirm('确定删除用户？', '操作提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			RequestUtil.OperateData(user.deleteuser(data)).then(function (response: EnumResult) {
				if (response == EnumResult.success) {
					refresh();
				}
			});
		})
		.catch(() => {
			ElMessage({
				message: '已取消删除',
				type: 'warning'
			});
		});
};
</script>
<style lang="scss"></style>
